<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>字段管理</title>
		<script type="text/javascript" src="/script/mootools.js"></script>
		<script type="text/javascript" src="/script/mootools-more.js"></script>
		<link rel="stylesheet" type="text/css" href="/script/jspxnet-ui.css" />
		<script type="text/javascript" src="/script/jspxnet.js"></script>
		<script type="text/javascript" src="/script/jspxnet-ui-roc.js"></script>
		<link href="/share/mskin/default/devcenter.css" rel="stylesheet" type="text/css" />
		<script src="/script/vue.js"></script>
		<style>
			[v-cloak] {
				display: none;
			}
			.table_text{
        		/* 让表格边线为单条线 */
        		border-collapse: collapse;
        		border: 1px solid #929ABB;
				width: 99%;
				margin-left: 10px;
			}
		</style>
	</head>
	<body>

		<div class="formContainer mWrap">
			<div class="mTitPanel addBoardLogo">
				字段管理
			</div>
			<div class="addConPanel mConPanel">

				<form id="columnForm" v-cloak>
					<div class="row">
						<label class="tit" for="helpTip">说明</label>
						<div class="con">
							字段管理,是用可扩展的实体类才能扩展,添加字段后将支持扩展字段,
							如果删除字段,请先备份好表,否则丢失数据概不负责。
							java类实体中固定的字段，不能删除。
						</div>
					</div>

					<div class="row">
						<label class="tit">表名</label>
						<div class="con">
							{{ name }}
						</div>
					</div>
					
					<div class="row">
						<label class="tit">描述</label>
						<div class="con">
							{{ caption }}
						</div>
					</div>

					<div class="row">
						<label class="tit">类</label>
						<div class="con">
							{{ className }}
						</div>
					</div>
					
					<div class="row">
						<label class="tit">扩展</label>
						<div class="con">
							{{ isCanExtend }}
						</div>
					</div>
					
					<div class="row w1column">
						<label class="tit">字段
							<span class="jDefButton" v-on:click="addFieldLine"><i class="jIcoAdd"></i></span>
						</label>
						<div id="actionPanel" class="row w1column" >
									<table class="table_text">
										<thead>
											<tr>
												<th>字段</th>
												<th>类型</th>
												<th>描述</th>
												<th>选项</th>
												<th>长度</th>
												<th>非空</th>
												<th>默认</th>
												<th>删除</th>
												<th>保存</th>
											</tr>
										</thead>
										<tbody>
											<tr v-for="item in columns">
												<td><input name="name" type="text" v-model:value="item.name" /></td>
												<td><input name="typeString" type="text" v-model:value="item.typeString" /></td>
												<td><input name="caption" type="text" v-model:value="item.caption" /></td>
												<td><textarea name="option" v-model="item.option"></textarea></td>
												<td><input name="length" type="text" v-model:value="item.length" /></td>
												<td><input name="notNull" type="checkbox" v-model:value="item.notNull" /></td>
												<td><input name="defaultValue" type="text" v-model:value="item.defaultValue" /></td>
												<td><span class="jDefButton"><i class="jIcoDelete" @click="deleteFieldLine"  v-bind:refId="item.name"></i></span></td>
												<td><span class="jDefButton"><i class="jIcoSave" @click="saveFieldLine"  v-bind:refId="item.name"></i></span></td>
											</tr>
										</tbody>			
									</table>
								</div>
						</div>
					</div>

				</form>
			</div>
		</div>
		<script>
			Vue.prototype.$log = console.log;
			Vue.prototype.$debuger = function() {
				debugger;
			};
			var className = getUrlParam("className");
			var app = false;
			window.addEvent('domready', function() {

				app = new Vue({
					el: '#columnForm',
					data: function() {
						return {
							"id": 0,
							"name": "",
							"caption": "",
							"desc": '',
							"isCanExtend": false,
							"columns": [],
							"className": '',
							"sortType": 1
						};
					},
					methods: {
						loadData: function() {
							var that = this;
							var posts = {
								"className": className
							};
							new Request.ROC({
								'url': '/devcenter/column/detail.jwc',
								'data':posts,
								onSuccess: function(obj) {
									if (obj.success) {
										Object.assign(that.$data, obj.data);
										app._data = obj.data;
										that.$forceUpdate();
									}
								}
							}).send();
						},
						addFieldLine() {
							var el = {
								"tableName":"",
								"name":"",
								"notNull":false,
								"defaultValue":"",
								"caption":"",
								"option":"",
								"dataType":"",
								"input":"text",
								"length":0,
								"hidden":false
							};
							app.columns.push(el);
							app.$forceUpdate();
						}, 
						deleteFieldLine() {
							var refid = event.target.getAttribute('refid');
							var column = false;
							var deleteIndex = false;
							
							app.columns.forEach(function(item, index, arr) {
								if (item.name == refid) {
									column = item;
									deleteIndex = index;
									return;
								}
							});
							
							if (column==null)
							{
								alert('填写数据不完整');
								return;
							}
							column.tableName = app.name;
							column.className = className;
							var posts = column;
							new Request.ROC({
								'url': '/devcenter/column/delete.jwc',
								'data':posts,
								onSuccess: function(obj) {
									if (obj.success == 1) {
										app.columns.splice(deleteIndex, 1); //满足条件 根据下标删除该元素
										app.$forceUpdate();
										new JDialog.Pop({
											title: '提示信息',
											message: obj.message
										}).show();
									} else {
										new JDialog.Alert({
											title: '提示信息',
											message: obj.message
										}).show();
									}
									
								}
							}).send();							
						}, 						
						saveFieldLine() {
							var refid = event.target.getAttribute('refid');
							var column = false;
							var oldColumn = false;
							app.columns.forEach(function(item, index, arr) {
								
								if (item.name == refid) {
									column = item;
									oldColumn = app.columns[index-1];
									return;
								}
							});
						
							if (column==null)
							{
								alert('填写数据不完整');
								return;
							}
							column.tableName = app.name;
							column.className = className;
							if (oldColumn)
							{
								column.oldColumn = oldColumn.name;
							}

							var posts = column;
							new Request.ROC({
								'url': '/devcenter/column/save.jwc',
								'data':posts,
								onSuccess: function(obj) {
									if (obj.success == 1) {
										new JDialog.Pop({
											title: '提示信息',
											message: obj.message
										}).show();
									} else {
										new JDialog.Alert({
											title: '提示信息',
											message: obj.message
										}).show();
									}
								}
							}).send();
						}, 					
						log(msg) {
							console.log(msg)
						}
					},
					mounted: function() {
						this.loadData();
					}
				});
			});
		</script>
	</body>

</html>
